<template>
  <div class="menu">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" width="60" label="顺序" align="center" />
      <el-table-column v-for="(x, y) in columnsList" :prop="x.name" :label="x.title" :width="x.width?x.width:80" align="center" />
      <el-table-column prop="createTime" label="创建时间" width="280" />
      <el-table-column prop="action" label="操作" width="230">
        <el-button>查看</el-button>
        <el-button>编辑</el-button>
        <el-button type="danger">删除</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { menuApi } from '@/apis/menu';
import { onMounted, ref } from 'vue';
const tableData = ref([])
const columnsList = [
  {
    name: 'name',
    title: '名称'
  }, {
    name: 'label',
    title: '标题',
    width: 120
  }, {
    name: 'level',
    title: '层级'
  }, {
    name: 'icon',
    title: '图标'
  }, {
    name: 'comment',
    title: '说明',
    width: 120
  }
]
onMounted(() => {
  menuApi.list().then(res => {
    tableData.value = res.data
  })
})
</script>
<style scoped lang="scss"></style>
